import { h, defineComponent, toRefs, onMounted, onUnmounted } from '@vue/runtime-core';
import planeImg from '../../assets/plane.png'
import { game } from '../Game';
import { useKeyboard } from '../use/index'
// import planeImg from '../../assets/wife.jpg'

export const PlaneInfo = {
  width: 258,
  height: 364
}

// 只展示 map
export default defineComponent({
  props: ['x', 'y'],
  setup(props, ctx) {
    /**
     * 方案一
     * props 是一个只读的响应式对象，所以这里当父级的值发生变化时，我们可以用 watch 来监
     * 听，但是使用的时候，我们需要再去创建一个响应式对象来接收，单纯的使用 props 是不会
     * 生效的。
     */
    // const point = reactive(
    //   {
    //     x: props.x,
    //     y: props.y
    //   }
    // )

    // 在 watch 中去监听 props，并对应的改变 points 的值
    // watch(props, (value) => {
    //   point.x = value.x;
    //   point.y = value.y;
    // })

    const { x, y } = toRefs(props);

    useAttackHandler(ctx, x, y)    

    // return {
    //   point
    // }

    /**
     * 方案二
     * console.log(props.x) 打印出来会是一个初始值 150，并不是 proxy，这是一个响应式丢失问题
     * 那这个时候我们就需要借助一个工具 toRefs
     * const { x, y } = toRefs(props);
     * 这个时候 x 和 y 就是 ref 形式的响应式对象
     */

    return {
      x,
      y
    }
  },
  render(ctx) {
    return h("Sprite", {
      x: ctx.x,  // 容器的 x
      y: ctx.y,   // 容器的 y
      texture: planeImg
    })
  }
})

function useAttackHandler(ctx, x, y) {
  let isAttack = false;
  // 攻击时间间隔
  const ATTACK_INTERVAL = 10;

  let startTime = 0;

  const handleTicker = () => {
    if (isAttack) {
      startTime++;
      if (startTime > ATTACK_INTERVAL) {
        emitAttack();
        startTime = 0
      }
    }
  }

  onMounted(() => {
    game.ticker.add(handleTicker)
  })

  onUnmounted(() => {
    game.ticker.remove(handleTicker)
  })

  const emitAttack = () => {
    // 生成按照飞机坐标走的子弹数据
    ctx.emit("attack", {
      x: x.value + 100,
      y: y.value
    })
  }

  const startAttck = () => {
    isAttack = true;
    startTime = 100;
  }

  const stopAttck = () => {
    isAttack = false
  }

  useKeyboard({
    Space: {
      keydown: startAttck,
      keyup: stopAttck
    }
  })
}